<template>
  <div>
    <h2 class="page-title">
      <el-icon><Help /></el-icon>
      虾塘管理
    </h2>
    <div class="card">
      <div class="table-operations">
        <div class="btn-area">
          <el-button type="primary" :icon="Plus" @click="handleAddPond">
            添加虾塘
          </el-button>
        </div>
        <div class="filter-area">
          <!-- 省市区联动选择 -->
          <el-cascader
            v-model="searchParams.selectedArea"
            :options="regionData"
            :props="cascaderProps"
            placeholder="选择省市区"
            clearable
            @change="handleAreaChange"
            style="width: 180px"
          />

          <!-- 面积范围 -->
          <div class="range-group">
            <el-input
              v-model.number="searchParams.minPondArea"
              placeholder="最小面积"
              type="number"
              min="0"
              step="0.01"
              style="width: 100px"
            />
            <span class="range-separator">-</span>
            <el-input
              v-model.number="searchParams.maxPondArea"
              placeholder="最大面积"
              type="number"
              min="0"
              step="0.01"
              style="width: 100px"
            />
          </div>

          <!-- 水深范围 -->
          <div class="range-group">
            <el-input
              v-model.number="searchParams.minPondDepth"
              placeholder="最小水深"
              type="number"
              min="0"
              step="0.1"
              style="width: 100px"
            />
            <span class="range-separator">-</span>
            <el-input
              v-model.number="searchParams.maxPondDepth"
              placeholder="最大水深"
              type="number"
              min="0"
              step="0.1"
              style="width: 100px"
            />
          </div>

          <!-- 虾塘名称搜索 -->
          <el-input
            v-model="searchParams.pondName"
            placeholder="搜索虾塘名称"
            style="width: 150px"
            clearable
            @keyup.enter="handleSearch"
          />

          <el-button type="primary" :icon="Search" @click="handleSearch">
            搜索
          </el-button>
          <el-button :icon="Refresh" @click="handleReset"> 重置 </el-button>
        </div>
      </div>

      <el-table
        :data="filteredPondList"
        stripe
        style="width: 100%"
        v-loading="loading"
        @row-click="handleRowClick"
        row-class-name="cursor-pointer"
      >
        <el-table-column
          prop="pondName"
          label="虾塘名称"
          width="120"
        ></el-table-column>

        <el-table-column
          prop="userName"
          label="负责人"
          width="100"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.userName || "无" }}
          </template>
        </el-table-column>

        <el-table-column label="面积(m²)" width="100" align="center">
          <template #default="scope">
            {{ formatDecimal(scope.row.pondArea) }}
          </template>
        </el-table-column>

        <el-table-column label="水深(m)" width="100" align="center">
          <template #default="scope">
            {{ formatDecimal(scope.row.pondDepth) }}
          </template>
        </el-table-column>

        <el-table-column label="地址" min-width="250" show-overflow-tooltip>
          <template #default="scope">
            {{ getFullAddress(scope.row) }}
          </template>
        </el-table-column>

        <el-table-column prop="createdTime" label="创建时间" width="200">
          <template #default="scope">
            {{
              scope.row.createdTime
                ? scope.row.createdTime.replace("T", " ")
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              :icon="Edit"
              @click.stop="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              :icon="Delete"
              @click.stop="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 添加/编辑虾塘弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑虾塘' : '添加虾塘'"
      :width="dialogWidth"
      @close="resetForm"
    >
      <el-form
        ref="pondFormRef"
        :model="pondForm"
        :rules="formRules"
        label-width="120px"
      >
        <el-form-item label="虾塘名称" prop="pondName">
          <el-input
            v-model="pondForm.pondName"
            placeholder="请输入虾塘名称"
            maxlength="50"
          ></el-input>
        </el-form-item>

        <el-form-item label="面积(m²)" prop="pondArea">
          <el-input
            v-model.number="pondForm.pondArea"
            placeholder="请输入虾塘面积"
            type="number"
            min="0"
            step="0.01"
          ></el-input>
        </el-form-item>

        <el-form-item label="水深(m)" prop="pondDepth">
          <el-input
            v-model.number="pondForm.pondDepth"
            placeholder="请输入虾塘水深"
            type="number"
            min="0"
            step="0.1"
          ></el-input>
        </el-form-item>

        <!-- 地址信息 -->
        <el-form-item label="省市区" prop="selectedArea">
          <el-cascader
            v-model="pondForm.selectedArea"
            :options="regionData"
            :props="cascaderProps"
            placeholder="请选择省市区"
            style="width: 100%"
            clearable
            @change="handleFormAreaChange"
          />
        </el-form-item>

        <el-form-item label="详细地址" prop="detailAddress">
          <el-input
            v-model="pondForm.addressBookUpsertRequest.detailAddress"
            placeholder="请输入详细地址"
            type="textarea"
            :rows="2"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="isEdit ? submitEditForm() : submitAddForm()"
        >
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 地图框选弹窗 -->
    <el-dialog
      v-model="mapDialogVisible"
      title="框选虾塘区域"
      width="1200px"
      :close-on-click-modal="false"
      @close="handleMapDialogClose"
    >
      <PondMap
        :pond-id="currentPondId"
        :visible="mapDialogVisible"
        :refresh-flag="refreshFlag"
        @save-success="onMapSaveSuccess"
        @save-fail="onMapSaveFail"
      />
    </el-dialog>

    <!-- 查看虾塘弹窗 -->
    <el-dialog v-model="viewVisible" title="虾塘详情" :width="dialogWidth">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="虾塘名称">{{
          currentPond.pondName
        }}</el-descriptions-item>
        <el-descriptions-item label="负责人">
          {{ currentPond.userName || "无" }}
        </el-descriptions-item>
        <el-descriptions-item label="面积(m²)">{{
          formatDecimal(currentPond.pondArea)
        }}</el-descriptions-item>
        <el-descriptions-item label="水深(m)">{{
          formatDecimal(currentPond.pondDepth)
        }}</el-descriptions-item>
        <el-descriptions-item label="地址">
          {{ getFullAddress(currentPond) }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          currentPond.createdTime
            ? currentPond.createdTime.replace("T", " ")
            : "-"
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { computed, onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { Help } from "@element-plus/icons-vue";
import { regionData } from "element-china-area-data";
import {
  deleteShrimpPondById,
  getShrimpPondById,
  saveShrimpPond,
  shrimpPondPage,
  updateShrimpPondById,
} from "@/api/pond";
import { useRouter } from "vue-router";
import PondMap from "./pondMap.vue"; // 引入地图组件

export default {
  name: "PondList",
  components: {
    Help,
    PondMap,
  },
  setup() {
    const Plus = ElementPlusIconsVue.Plus;
    const Search = ElementPlusIconsVue.Search;
    const Refresh = ElementPlusIconsVue.RefreshLeft;
    const Edit = ElementPlusIconsVue.Edit;
    const Delete = ElementPlusIconsVue.Delete;

    const loading = ref(false);
    const pondFormRef = ref(null);

    // 分页参数
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0,
    });

    // 搜索参数
    const searchParams = reactive({
      selectedArea: [],
      provinceCode: "",
      cityCode: "",
      districtCode: "",
      pondName: "",
      minPondArea: undefined,
      maxPondArea: undefined,
      minPondDepth: undefined,
      maxPondDepth: undefined,
    });

    // Cascader 配置
    const cascaderProps = {
      value: "value",
      label: "label",
      children: "children",
    };

    const pondList = ref([]);
    const isEdit = ref(false);
    const currentEditId = ref(null);
    const viewVisible = ref(false);
    const currentPond = ref(null);
    const dialogVisible = ref(false);
    const dialogWidth = "600px";

    // 表单数据
    const pondForm = reactive({
      pondName: "",
      pondArea: 0,
      pondDepth: 0,
      selectedArea: [],
      addressBookUpsertRequest: {
        provinceCode: "",
        provinceName: "",
        cityCode: "",
        cityName: "",
        districtCode: "",
        districtName: "",
        detailAddress: "",
      },
    });

    // 表单验证规则
    const formRules = reactive({
      pondName: [
        { required: true, message: "请输入虾塘名称", trigger: "blur" },
        { max: 50, message: "虾塘名称不能超过50个字符", trigger: "blur" },
      ],
      pondArea: [
        { required: true, message: "请输入虾塘面积", trigger: "blur" },
        {
          type: "number",
          min: 0,
          message: "面积必须大于等于0",
          trigger: "blur",
        },
      ],
      pondDepth: [
        { required: true, message: "请输入虾塘水深", trigger: "blur" },
        {
          type: "number",
          min: 0,
          message: "水深必须大于等于0",
          trigger: "blur",
        },
      ],
      selectedArea: [
        { required: true, message: "请选择省市区", trigger: "change" },
      ],
      "addressBookUpsertRequest.detailAddress": [
        { required: true, message: "请输入详细地址", trigger: "blur" },
        { max: 200, message: "详细地址不能超过200个字符", trigger: "blur" },
      ],
    });

    // 地图相关变量
    const mapDialogVisible = ref(false);
    const currentPondId = ref(null);
    const isAreaSaved = ref(false);
    const refreshFlag = ref(0); // 用于通知地图组件刷新数据

    // 地图保存成功回调
    const onMapSaveSuccess = async () => {
      isAreaSaved.value = true;
      mapDialogVisible.value = false;
      await fetchPondList();
      refreshFlag.value += 1; // 触发地图刷新
    };

    // 地图保存失败回调
    const onMapSaveFail = (message) => {
      ElMessage.error(message || "保存失败");
    };

    // 地图弹窗关闭处理
    const handleMapDialogClose = async () => {
      // 如果是新建虾塘且未保存区域信息，删除刚创建的虾塘记录
      if (currentPondId.value && !isAreaSaved.value && !isEdit.value) {
        try {
          await deleteShrimpPondById(currentPondId.value);
          await fetchPondList();
          refreshFlag.value += 1; // 触发地图刷新
        } catch (error) {
          console.error("删除未完成虾塘失败:", error);
        }
      }
      // 重置状态
      currentPondId.value = null;
      isAreaSaved.value = false;
    };

    // 表单地区选择变化
    const handleFormAreaChange = (value) => {
      if (value && value.length === 3) {
        const [provinceCode, cityCode, districtCode] = value;

        // 通过编码获取名称
        pondForm.addressBookUpsertRequest.provinceCode = provinceCode;
        pondForm.addressBookUpsertRequest.provinceName =
          getAreaNameByCode(provinceCode);
        pondForm.addressBookUpsertRequest.cityCode = cityCode;
        pondForm.addressBookUpsertRequest.cityName =
          getAreaNameByCode(cityCode);
        pondForm.addressBookUpsertRequest.districtCode = districtCode;
        pondForm.addressBookUpsertRequest.districtName =
          getAreaNameByCode(districtCode);
      } else {
        // 清空数据
        pondForm.addressBookUpsertRequest.provinceCode = "";
        pondForm.addressBookUpsertRequest.provinceName = "";
        pondForm.addressBookUpsertRequest.cityCode = "";
        pondForm.addressBookUpsertRequest.cityName = "";
        pondForm.addressBookUpsertRequest.districtCode = "";
        pondForm.addressBookUpsertRequest.districtName = "";
      }
    };

    // 获取完整地址显示
    const getFullAddress = (pond) => {
      if (!pond.addressBookVO) return "-";

      const { provinceName, cityName, districtName, detailAddress } =
        pond.addressBookVO;
      const addressParts = [
        provinceName,
        cityName,
        districtName,
        detailAddress,
      ].filter(Boolean);
      return addressParts.length > 0 ? addressParts.join("") : "-";
    };

    // 搜索区域选择改变
    const handleAreaChange = (value) => {
      if (value && value.length === 3) {
        searchParams.provinceCode = value[0];
        searchParams.cityCode = value[1];
        searchParams.districtCode = value[2];
      } else {
        searchParams.provinceCode = "";
        searchParams.cityCode = "";
        searchParams.districtCode = "";
      }
    };

    // 搜索虾塘
    const handleSearch = () => {
      pagination.currentPage = 1;
      fetchPondList();
    };

    // 重置搜索条件
    const handleReset = () => {
      searchParams.selectedArea = [];
      searchParams.provinceCode = "";
      searchParams.cityCode = "";
      searchParams.districtCode = "";
      searchParams.pondName = "";
      searchParams.minPondArea = undefined;
      searchParams.maxPondArea = undefined;
      searchParams.minPondDepth = undefined;
      searchParams.maxPondDepth = undefined;
      pagination.currentPage = 1;
      pagination.pageSize = 10;
      fetchPondList();
    };

    // 获取虾塘列表
    const fetchPondList = async () => {
      try {
        loading.value = true;

        const params = {
          page: pagination.currentPage,
          pageSize: pagination.pageSize,
          provinceCode: searchParams.provinceCode || undefined,
          cityCode: searchParams.cityCode || undefined,
          districtCode: searchParams.districtCode || undefined,
          pondName: searchParams.pondName || undefined,
          minPondArea: searchParams.minPondArea,
          maxPondArea: searchParams.maxPondArea,
          minPondDepth: searchParams.minPondDepth,
          maxPondDepth: searchParams.maxPondDepth,
        };

        Object.keys(params).forEach((key) => {
          if (params[key] === undefined || params[key] === "") {
            delete params[key];
          }
        });

        const result = await shrimpPondPage(params);

        if (result.code !== 0) {
          ElMessage.error(result.message || "获取数据失败");
          pondList.value = [];
          pagination.total = 0;
          return;
        }

        pondList.value = result.data?.rows || [];
        pagination.total = parseInt(result.data?.total) || 0;
      } catch (error) {
        console.error("获取虾塘列表异常:", error);
        let errorMsg = "网络错误，无法获取虾塘数据";

        if (error.message?.includes("登录已过期")) {
          const router = useRouter();
          await router.push("/login");
          errorMsg = "登录已过期，请重新登录";
        } else if (error instanceof Event) {
          errorMsg = `操作失败: ${error.type || "未知事件错误"}`;
        } else if (error.message) {
          errorMsg = error.message;
        }

        ElMessage.error(errorMsg);
        pondList.value = [];
        pagination.total = 0;
      } finally {
        loading.value = false;
      }
    };

    // 分页大小改变
    const handleSizeChange = (newSize) => {
      pagination.pageSize = newSize;
      pagination.currentPage = 1;
      fetchPondList();
    };

    // 当前页改变
    const handleCurrentChange = (newPage) => {
      pagination.currentPage = newPage;
      fetchPondList();
    };

    // 添加虾塘
    const handleAddPond = () => {
      isEdit.value = false;
      currentEditId.value = null;
      dialogVisible.value = true;
      resetForm();
    };

    // 编辑虾塘
    const handleEdit = async (row) => {
      try {
        const result = await getShrimpPondById(row.id);
        if (result.code === 0) {
          isEdit.value = true;
          currentEditId.value = row.id;
          const data = result.data;

          pondForm.pondName = data.pondName;
          pondForm.pondArea = data.pondArea;
          pondForm.pondDepth = data.pondDepth;

          if (data.addressBookVO) {
            const address = data.addressBookVO;

            // 通过名称获取编码
            const provinceCode = getCodeByName(
              address.provinceName,
              "province"
            );
            const cityCode = getCodeByName(
              address.cityName,
              "city",
              provinceCode
            );
            const districtCode = getCodeByName(
              address.districtName,
              "district",
              cityCode
            );

            // 设置级联选择器的绑定值
            pondForm.selectedArea = [
              provinceCode,
              cityCode,
              districtCode,
            ].filter(Boolean);

            pondForm.addressBookUpsertRequest = {
              provinceCode: provinceCode || address.provinceCode || "",
              provinceName: address.provinceName || "",
              cityCode: cityCode || address.cityCode || "",
              cityName: address.cityName || "",
              districtCode: districtCode || address.districtCode || "",
              districtName: address.districtName || "",
              detailAddress: address.detailAddress || "",
            };
          }

          dialogVisible.value = true;
        }
      } catch (error) {
        console.error("获取编辑数据失败:", error);
        ElMessage.error("编辑失败");
      }
    };

    // 通过名称和层级获取编码（支持省/市/区的层级查找）
    const getCodeByName = (name, level = "province", parentCode = "") => {
      if (!name) return "";

      // 递归查找省
      const findProvince = (data) => {
        for (const item of data) {
          if (item.label === name && level === "province") {
            return item.value;
          }
          if (item.children) {
            const result = findProvince(item.children);
            if (result) return result;
          }
        }
        return "";
      };

      // 根据省编码查找市
      const findCity = (provinceCode, cityName) => {
        const province = regionData.find((item) => item.value === provinceCode);
        if (province && province.children) {
          const city = province.children.find(
            (item) => item.label === cityName
          );
          return city ? city.value : "";
        }
        return "";
      };

      // 根据市编码查找区
      const findDistrict = (cityCode, districtName) => {
        // 先找到对应的省
        for (const p of regionData) {
          const city = p.children.find((c) => c.value === cityCode);
          if (city && city.children) {
            const district = city.children.find(
              (d) => d.label === districtName
            );
            return district ? district.value : "";
          }
        }
        return "";
      };

      if (level === "province") {
        return findProvince(regionData);
      } else if (level === "city" && parentCode) {
        return findCity(parentCode, name);
      } else if (level === "district" && parentCode) {
        return findDistrict(parentCode, name);
      }

      return "";
    };

    // 删除虾塘
    const handleDelete = async (row) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除虾塘"${row.pondName}"吗？`,
          "确认删除",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        const result = await deleteShrimpPondById(row.id);
        if (result.code === 0) {
          ElMessage.success("删除成功");
          await fetchPondList();
          // 确保地图对话框关闭
          if (mapDialogVisible.value) {
            mapDialogVisible.value = false;
          }
          // 延迟刷新以确保对话框已关闭
          setTimeout(() => {
            refreshFlag.value += 1;
          }, 300);
        } else {
          ElMessage.error(result.message || "删除失败");
        }
      } catch (error) {
        if (error !== "cancel") {
          console.error("删除异常:", error);
          ElMessage.error("删除失败，请重试");
        }
      }
    };

    // 重置表单
    const resetForm = () => {
      if (pondFormRef.value) {
        pondFormRef.value.resetFields();
      }
      pondForm.pondName = "";
      pondForm.pondArea = 0;
      pondForm.pondDepth = 0;
      pondForm.selectedArea = [];
      pondForm.addressBookUpsertRequest = {
        provinceCode: "",
        provinceName: "",
        cityCode: "",
        cityName: "",
        districtCode: "",
        districtName: "",
        detailAddress: "",
      };
    };

    // 提交新增表单
    const submitAddForm = async () => {
      if (!pondFormRef.value) return;

      try {
        const valid = await pondFormRef.value.validate();
        if (!valid) return;

        const submitData = {
          pondName: pondForm.pondName,
          pondArea: pondForm.pondArea,
          pondDepth: pondForm.pondDepth,
          addressBookUpsertRequest: { ...pondForm.addressBookUpsertRequest },
        };

        const result = await saveShrimpPond(submitData);
        if (result.code === 0) {
          dialogVisible.value = false;
          currentPondId.value = result.data;
          isAreaSaved.value = false;
          mapDialogVisible.value = true;
          refreshFlag.value += 1; // 新增后触发地图刷新
        } else {
          ElMessage.error(result.message || "添加失败");
        }
      } catch (error) {
        if (error.name === "ValidationError") return;
        console.error("添加虾塘异常:", error);
        ElMessage.error("添加虾塘失败，请稍后重试");
      }
    };

    // 提交编辑表单
    const submitEditForm = async () => {
      if (!pondFormRef.value || !currentEditId.value) return;

      try {
        const valid = await pondFormRef.value.validate();
        if (!valid) return;

        const submitData = {
          pondName: pondForm.pondName,
          pondArea: pondForm.pondArea,
          pondDepth: pondForm.pondDepth,
          addressBookUpsertRequest: { ...pondForm.addressBookUpsertRequest },
        };

        const result = await updateShrimpPondById(
          currentEditId.value,
          submitData
        );
        if (result.code === 0) {
          ElMessage.success("编辑成功");
          dialogVisible.value = false;
          await fetchPondList();
          refreshFlag.value += 1; // 编辑后触发地图刷新
        } else {
          ElMessage.error(result.message || "编辑失败");
        }
      } catch (error) {
        if (error.name === "ValidationError") return;
        console.error("编辑虾塘异常:", error);
        ElMessage.error("编辑虾塘失败，请稍后重试");
      }
    };

    // 格式化数字为两位小数
    const formatDecimal = (num) => {
      if (num === undefined || num === null || isNaN(num)) {
        return "0.00";
      }
      return parseFloat(num).toFixed(2);
    };

    // 行点击事件 - 查看详情
    const handleRowClick = async (row) => {
      try {
        const result = await getShrimpPondById(row.id);
        currentPond.value = result.data;
        viewVisible.value = true;
      } catch (error) {
        console.error("获取详情失败:", error);
        ElMessage.error("查看失败");
      }
    };

    // 根据地区代码获取地区名称
    const getAreaNameByCode = (code, data = regionData) => {
      for (const item of data) {
        if (item.value === code) {
          return item.label;
        }
        if (item.children) {
          const result = getAreaNameByCode(code, item.children);
          if (result) return result;
        }
      }
      return "";
    };

    // 计算属性
    const hasValidArea = computed(() => {
      return false;
    });

    onMounted(() => {
      fetchPondList();
    });

    return {
      Help,
      Plus,
      Search,
      Refresh,
      Edit,
      Delete,
      loading,
      filteredPondList: pondList,
      pagination,
      searchParams,
      regionData,
      cascaderProps,
      handleAreaChange,
      handleFormAreaChange,
      handleSearch,
      handleReset,
      handleAddPond,
      handleEdit,
      handleDelete,
      handleSizeChange,
      handleCurrentChange,
      dialogVisible,
      dialogWidth,
      pondFormRef,
      pondForm,
      formRules,
      submitAddForm,
      submitEditForm,
      resetForm,
      isEdit,
      viewVisible,
      currentPond,
      getFullAddress,
      handleRowClick,
      formatDecimal,
      mapDialogVisible,
      currentPondId,
      onMapSaveSuccess,
      onMapSaveFail,
      hasValidArea,
      refreshFlag,
      handleMapDialogClose,
    };
  },
};
</script>

<style scoped>
.page-title {
  font-size: 20px;
  margin-bottom: 20px;
  color: #1b9a7c;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-title .el-icon {
  font-size: 24px;
}

.table-operations {
  margin-bottom: 20px;
}

.range-separator {
  color: #909399;
  padding: 0 4px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.card {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

:deep(.el-table .el-table__cell) {
  padding: 12px 0;
}

.table-operations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.btn-area {
  margin-right: 10px;
}

.filter-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.range-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.range-separator {
  color: #909399;
  padding: 0 4px;
}
</style>
